<template>
  <div class="lcds-root-container">
    <div>
      <div>
        <lc-rower> </lc-rower>
      </div>
      <div
        class="lc-buttonGroup lc-buttonGroup__level lc-buttonGroup__center"
        style="justify-content: center"
      >
        <el-button class="lc-button" @click="handleClickStepsToLast"> 上一步 </el-button>
        <el-button class="lc-button" @click="handleClickStepsToNext"> 下一步 </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, provide, inject, ref } from 'vue';

defineOptions({
  name: 'StepsPanel04'
});

const emit = defineEmits(['stepsToLast', 'stepsToNext']);

const forms = {};

provide('collectStepFormInstance', (name, formVm) => {
  forms[name] = formVm;
});

const collectStepPanel = inject('collectStepPanel', () => void 0);

const handleClickStepsToLast = () => {
  emit('stepsToLast');
};
const handleClickStepsToNext = () => {
  try {
    formRef.value.validate((validated) => {
      validated && emit('stepsToNext');
    });
  } catch (e) {
    ElMessage.error(e);
  }
};

const resetForm = () => {
  Object.keys(forms).forEach((key) => {
    const formVm = forms[key];
    formVm && formVm.value.resetFields();
  });
};

onMounted(() => {
  collectStepPanel({
    resetForm
  });
});
</script>
